<template>
  <div class="about">
    This is an about page
  </div>
  <div class="mb-4">
   
   
    <el-button type="success" @click = "add()">新增</el-button>
    
  </div>
  <div>
    <el-input v-model="input" style="width: 240px" placeholder="Please input" />
    <el-button type="success" @click = "find()">查询</el-button>
  </div>
  
  <div>
    <!-- 此处的prop要和数据库的列名对应，如果不对应，则需要指名具体的列名 -->
    <el-table :data="tableData" style="width: 100%" >
    <el-table-column fixed prop="id" label="Id" width="150" />
    <el-table-column prop="name" label="Name" width="120" />
    <el-table-column prop="password" label="Pasword" width="120" />
    <el-table-column prop="phonenumber" label="Phone_number" width="150" />
    <el-table-column prop="email" label="Email" width="200" />
    <el-table-column prop="status" label="User_status" width="120" />
    <el-table-column fixed="right" prop="subscribe" label="Subscribe" min-width="120">
      <template #default="{row}">
        <el-button link type="primary" size="small" @click="edit(row)">
          Edit
        </el-button>
        <el-button link type="primary" size="small" @click="del(row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>


  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="500"
    :before-close="handleClose"
  >
  <el-form :model="form" label-width="auto" style="max-width: 600px"  >
    <el-form-item label="Id">
      <el-input :disabled="isDisabled" v-model="form.id" />
    </el-form-item>
    <el-form-item label="Name">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="Password">
      <el-input v-model="form.password" />
    </el-form-item>
    <el-form-item label="Phone_number">
      <el-input v-model="form.phonenumber" />
    </el-form-item>
    <el-form-item label="Email">
      <el-input v-model="form.email" />
    </el-form-item>
    <el-form-item label="User_status">
      <el-input v-model="form.status" />
    </el-form-item>
    <el-form-item label="Subscribe">
      <el-input v-model="form.subscribe" />
    </el-form-item>
  </el-form>


    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="save(url)">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>


<script lang="ts" setup>

import { ref, onMounted } from 'vue';
import axios from 'axios';
import { ElMessageBox } from 'element-plus'
import { reactive } from 'vue'
const dialogVisible = ref(false)
const tableData = ref([]);
const isDisabled = ref(true)
let url = ""
const input = ref('')


// do not use same name with ref
const form:TableRow = reactive({
  id: 0,
  name: '',
  password: '',
  phonenumber:'',
  email: '',
  status: 0,
  subscribe: '',
})

const find = async()=>{
  try {
    const response = await axios.get('http://localhost:8888/user/findById',{
      params:{
      id: Number(input.value),
      }
    });
    // 将数据保存在对象的 items 属性中
    tableData.value = response.data.data
    
    console.log("我是数据",tableData.value);
    
  } catch (error) {
   // console.error('Error fetching data:', error);
  }
}

const save = async(url:string) => {

  try {
    //console.log(row);
    const response = await axios.put(url, form);
    //console.log(response);
  } catch (error) {
   // console.error('Error fetching data:', error);
  }
  dialogVisible.value = false;
  fetchData();
}

const handleClose = () => {
   dialogVisible.value=false;
}

// const handleClose = (done: () => void) => {
//     done();
//   // ElMessageBox.confirm('Are you sure to close this dialog?')
//   //   .then(() => {
//   //     done()
//   //   })
//   //   .catch(() => {
//   //     // catch error
//   //   })
// }




type TableRow = {
  id: number;
  name: string;
  password: string;
  phonenumber: string;
  email: string;
  status: number;
  subscribe: string;
};

const edit = async (row:TableRow) => {
  dialogVisible.value=true;
  isDisabled.value=true;
  form.id = row.id;
  form.name = row.name;
  form.password = row.password;
  form.email = row.email;
  form.phonenumber=row.phonenumber;
  form.status = row.status;
  form.subscribe = row.subscribe;
  url = 'http://localhost:8888/user/editUser';
}

const del = async (row:TableRow) => {
  try {
    const response = await axios.delete('http://localhost:8888/user/deleteUser',{
      params:{
      id: row.id,
      }
    });
  } catch (error) {
   // console.error('Error fetching data:', error);
  }
  fetchData();
}

const add = async ()=>{
  dialogVisible.value = true;
  isDisabled.value=false;
  form.id = NaN;
  form.name='';
  form.password = '';
  form.email = '';
  form.phonenumber='';
  form.status = NaN;
  form.subscribe = ''
  url = 'http://localhost:8888/user/addUser';

  

}



// 获取数据的函数
async function fetchData() {
  try {
    const response = await axios.get('http://localhost:8888/user/queryAll');
    // 将数据保存在对象的 items 属性中
    tableData.value = response.data.data;
    //console.log(tableData.value);
  } catch (error) {
   // console.error('Error fetching data:', error);
  }
}

// 在组件挂载完成后调用 fetchData 函数
onMounted(() => {
  fetchData();
});
</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
